<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 页面头部，包含元数据和样式 -->
	<meta charset="utf-8"> <!-- 设置字符编码为UTF-8，支持多种字符集 -->
	<title>商品飞入购物车动画</title> <!-- 设置网页的标题，在浏览器标签上显示 -->
	<style type="text/css"> <!-- 定义CSS样式 -->
		/* 全局样式 */
		* { 
			margin: 0; /* 去除所有元素的外边距 */
			padding: 0; /* 去除所有元素的内边距 */
		}
		body { 
			background-color: #F2EEE9; /* 设置页面背景颜色 */
			color: #333; /* 设置页面字体颜色 */
		}

		.wrapper { 
			width: 705px; /* 设置容器宽度 */
			margin: 20px auto; /* 设置容器上下外边距为20px，左右居中 */
			padding: 20px; /* 设置容器内边距为20px */
			position: relative; /* 设置容器的定位为相对定位 */
		}

		.clear { 
			clear: both; /* 清除浮动元素的影响 */
		}

		.items { 
			display: block; /* 将.items设置为块级元素 */
			margin: 20px 0; /* 设置上下外边距为20px */
		}

		.item { 
			background-color: #fff; /* 设置商品项的背景色为白色 */
			float: left; /* 将商品项浮动排列 */
			margin: 0 10px 10px 0; /* 设置商品项的右边和下边外边距为10px */
			width: 205px; /* 设置商品项的宽度为205px */
			padding: 10px; /* 设置商品项的内边距为10px */
			height: 290px; /* 设置商品项的高度为290px */
		}
		.item img { 
			display: block; /* 将商品图片设置为块级元素 */
			margin: auto; /* 将图片水平居中 */
		}
		h2 { 
			font-size: 16px; /* 设置商品标题的字体大小为16px */
			display: block; /* 将h2设置为块级元素 */
			border-bottom: 1px solid #ccc; /* 为标题添加下边框 */
			margin: 0 0 10px 0; /* 设置标题的下边距为10px */
			padding: 0 0 5px 0; /* 设置标题的下内边距为5px */
		}
		button { 
			border: 1px solid #722A1B; /* 设置按钮边框颜色 */
			padding: 4px 14px; /* 设置按钮的内边距 */
			background-color: #fff; /* 设置按钮的背景色为白色 */
			color: #722A1B; /* 设置按钮文字的颜色 */
			text-transform: uppercase; /* 将按钮文字转为大写 */
			float: right; /* 将按钮右浮动 */
			margin: 5px 0; /* 设置按钮的上下外边距为5px */
			font-weight: bold; /* 设置按钮文字为加粗 */
			cursor: pointer; /* 设置鼠标悬停时为指针样式 */
		}

		/* 购物车图标 */
		a.car { 
			position: absolute; /* 设置购物车图标为绝对定位 */
			right: 0; /* 设置购物车图标的位置为右对齐 */
			top: 0; /* 设置购物车图标的位置为顶部对齐 */
		}

		/* 添加购物车时的动画效果 */
		.shake { 
			animation: shake 0.5s ease; /* 添加shake动画，动画持续时间为0.5秒 */
		}
		@keyframes shake { 
			0% { transform: translateX(0); } /* 初始位置 */
			25% { transform: translateX(-10px); } /* 向左移动10px */
			50% { transform: translateX(10px); } /* 向右移动10px */
			75% { transform: translateX(-10px); } /* 向左移动10px */
			100% { transform: translateX(0); } /* 恢复到原始位置 */
		}
	</style>
</head>
<body> <!-- 页面主体 -->
	<div class="wrapper"> <!-- 包裹所有内容的容器 -->
		<!-- 购物车图标 -->
		<a class="car" href="#"> <!-- 定义购物车图标的链接 -->
			<img src="img/_cart.png" > <!-- 购物车图标的图片 -->
		</a>

		<div class="items"> <!-- 商品列表容器 -->
			<div class="item"> <!-- 商品项 -->
				<img src="img/droid-x.jpg" /> <!-- 商品图片 -->
				<h2>droid-x</h2> <!-- 商品标题 -->
				<p>Price:\$255</p> <!-- 商品价格 -->
				<button class="add-to-cart" type="button">Add to cart</button> <!-- 添加到购物车按钮 -->
			</div>

			<div class="item"> <!-- 商品项 -->
				<img src="img/htc-ozone.jpg" /> <!-- 商品图片 -->
				<h2>htc-ozone</h2> <!-- 商品标题 -->
				<p>Price:\$368</p> <!-- 商品价格 -->
				<button class="add-to-cart" type="button">Add to cart</button> <!-- 添加到购物车按钮 -->
			</div>

			<div class="item"> <!-- 商品项 -->
				<img src="img/motorola-backflip.jpg" /> <!-- 商品图片 -->
				<h2>motorola-backflip</h2> <!-- 商品标题 -->
				<p>Price:\$226</p> <!-- 商品价格 -->
				<button class="add-to-cart" type="button">Add to cart</button> <!-- 添加到购物车按钮 -->
			</div>
		</div>
	</div>

	<script type="text/javascript"> <!-- 使用JavaScript脚本 -->
		// 1、当点击 "Add to cart" 按钮时，执行以下代码
		$('.add-to-cart').on('click', function () {  /* 监听点击“添加到购物车”按钮的事件 */
			// 复制商品图片并设置样式
			var $img = $(this).siblings('img').clone().css({ /* 获取当前按钮的兄弟元素（商品图片），并克隆一份 */
				'position': 'absolute',  /* 将图片定位为绝对位置 */
				'z-index': '1000',       /* 设置图层，使图片在其他元素上方 */
				'width': '100px',        /* 设置初始宽度为100px */
				'opacity': '0.5'         /* 设置透明度为50% */
			});
			
			// 2、将复制的图片插入到页面中，并设置它的初始位置为商品图片的位置
			$img.appendTo('.wrapper').offset({ /* 将克隆的图片添加到容器中，并设置其位置 */
				top: $(this).siblings('img').offset().top,   /* 设置初始的top位置 */
				left: $(this).siblings('img').offset().left  /* 设置初始的left位置 */
			});
			
			// 3、让复制的图片慢慢移动到购物车图标的位置，同时缩小图片
			$img.animate({ /* 使用animate函数控制图片的动画效果 */
				top: $('.car').offset().top,       /* 目标位置的top */
				left: $('.car').offset().left,     /* 目标位置的left */
				width: '30px'                      /* 缩小到30px */
			}, 1000, function () { /* 动画时间为1000ms，即1秒 */
				// 4、动画完成后，购物车发生抖动效果，并且复制的图片消失
				$('.car').addClass('shake');  /* 添加shake动画类，触发购物车抖动效果 */
				setTimeout(() => { /* 500ms后移除抖动效果 */
					$('.car').removeClass('shake');  /* 移除shake类 */
				}, 500);
			});
		});
	</script>
</body>
</html>
